<template>
  <div class="home-container">
    <!-- 1.navbar顶部栏 -->
    <van-nav-bar fixed>
      <template #left>
        <div class="logo"></div>
      </template>
      <template #right>
        <van-button
          class="search-btn"
          icon="search"
          type="info"
          round
          @click="$router.push({ path: '/ArticleSearch' })"
        >
          搜索
        </van-button>
      </template>
    </van-nav-bar>
    <!-- 2.tab栏 -->
    <van-tabs
      v-model="active"
      title-active-color="cyan"
      color="green"
      @click="tabClick"

    >
      <van-tab v-for="item in channels" :key="item.id" :title="item.name" :name="item.name">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-cell
              v-for="item in list"
              :key="item.art_id.toString()"
              :title="item.title"
              @click="doClick(item.art_id)"
            >
              <!-- label插槽显示grid -->
              <template #label>
                <!-- grid宫格显示图片 -->
                <van-grid :column-num="item.cover.type">
                  <van-grid-item
                    v-for="(img, index) in item.cover.images"
                    :key="index"
                  >
                    <van-image lazy-load :src="img" />
                  </van-grid-item>
                </van-grid>
                <!-- div显示文本 -->
                <div>
                  <span>{{ item.aut_name }}</span>
                  <span>({{ item.comm_count }})评论</span>
                  <span>{{ item.pubdate | showTime }}</span>
                </div>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>
      <van-icon name="plus" @click="$router.push('/ChannelEdit')"></van-icon>
    </van-tabs>
  </div>
</template>

<script>
// 导入接口
import { getUserChannel, getArticles } from '@/api/home.js'
// 导入moment
import moment from 'moment'
// 设置语言
moment.locale('zh-cn')

export default {
  name: 'ArticleList',
  data () {
    return {
      active: '推荐', // tab栏点击的标题name
      list: [], // 列表数据
      loading: false, // 上拉加载更多动画（上拉触底后自动变为true）
      finished: false, // 上拉加载完成（true:此时上拉触底不会加载更多数据）
      isLoading: false, // 下拉刷新动画
      channels: [], // 频道列表
      timestamp: null
    }
  },
  methods: {
    /* 上拉加载更多 */
    async onLoad () {
      // 1.判断有没有timestamp
      if (!this.timestamp) {
        // 默认获取当前时间戳表示请求第一页
        this.timestamp = Date.now()
      }
      // 2.发送请求
      const res = await getArticles({
        channel_id: this.channels.find(item => item.name === this.active).id,
        timestamp: this.timestamp
      })
      console.log(res)

      // 存储服务器返回的时间戳用于请求下一页数据
      this.timestamp = res.data.data.pre_timestamp
      // 添加数据
      this.list.push(...res.data.data.results)
      console.log(res)

      // 2.修改loading为false:本次加载结束
      this.loading = false

      // 3.如果超过100条数据，这个时候就不再触底
      if (this.list.length >= 100) {
        this.finished = true
      }
    },
    /* 下拉刷新 : 本质其实还是执行下拉刷新请求数据逻辑 */
    onRefresh () {
      // 0.一旦下拉刷新，无条件的设置finished为false(保证刷新之后可以正常上拉加载更多)
      this.finished = false
      this.timestamp = null // 下拉刷新时间戳清空，从头开始加载
      // 1.先清空旧数据
      this.list = []
      // 2.设置上拉加载更多状态为true(开启底部加载中动画)
      this.loading = true
      // 3.重新请求数据
      this.onLoad()
      // 4.关闭上拉刷新动画（如果不写，上面的上拉刷新动画会一直转圈）
      this.isLoading = false
    },
    /* tab栏切换 */
    tabClick () {
      // 1.清空列表
      this.list = []
      this.timestamp = null
      // 2.设置loading状态true,开始加载
      this.loading = true
      // 3.主动调用onLoad
      this.onLoad()
    },
    doClick (id) {
      localStorage.setItem('scroll', document.querySelector('.van-tabs__content').scrollTop)
      this.$router.push({ path: '/ArticleDetail', query: { id } })
    }
  },
  async created () {
    const res = await getUserChannel()
    this.channels = res.data.data.channels
  },
  /* 过滤器 */
  filters: {
    showTime (value) {
      return moment(value).fromNow()
    }
  },
  async activated () {
    document.querySelector('.van-tabs__content').scrollTop = localStorage.getItem('scroll')
    const res = await getUserChannel()
    this.channels = res.data.data.channels
  }
}
</script>

<style lang="less">
/* 设置body的overflow解决滑动过快导致列表出现空白问题 */
body {
  overflow: hidden;
}

.home-container {
  // 1vh = 屏幕高度 1/100
  height: 100vh;
  padding-top: 46px;
  padding-bottom: 50px;
  box-sizing: border-box;
  /* 1.顶部栏 */
  .van-nav-bar {
    background-color: #3296fa;
    .logo {
      /* 注意点
      如果在图片路径中使用@，默认前面会有./(./@/image.png) 导致编译器报错
      解决： 在@前面添加~ (去掉默认./)
      */
      background: url('~@/assets/logo.png') no-repeat;
      background-size: cover;
      width: 100px;
      height: 30px;
    }

    // 搜索按钮
    .search-btn {
      background-color: #5babfb;
      width: 100px;
      font-size: 14px;
      border: none;
      .van-icon {
        color: #fff;
      }
      .van-button__text {
        color: #fff;
      }
    }
  }

  /* 2.tab栏 > 上面tab栏 + 下方list展示盒子 */
  .van-tabs {
    height: 100%;
    padding-top: 46px;
    box-sizing: border-box;
    position: relative;
    /* 上面tab栏 */
    .van-tabs__wrap {
      position: fixed;
      width: 100%;
      top: 46px;
      z-index: 10;
    }

    /* 下面列表 */
    .van-tabs__content {
      height: 100%;
      overflow-y: scroll;

      /* 文字间距 */
      .van-cell__label span {
        padding-right: 10px;
      }
    }

    .van-icon{
      position: fixed;
      z-index: 999;
      top: 60px;
      right: 0px;
      font-size: 15px;
      padding-right: 3px;
      background-color: #fff;
    }
  }
}
</style>
